<template>
	 <div class="login container">
		 <Header></Header>
		 
		<section>
			<div class="login-tel">
				<input type="text" placeholder="输入手机号码" v-model="userTel" pattern="[0-9]"/>
			</div>
			
			<div class="login-code">
				<input type="text" placeholder="输入密码" v-model="userPwd" pattern="[0-9]"/>
			</div>
			<div class='login-btn' @click="login">登录</div>
			
			<div class="tab">
				<span @click="goLogin">验证码登录</span>
				<span @click="goRecovery">找回密码</span>
				<span @click="goRegister">快速注册</span>
			</div>
		</section>
		 <Tabbar></Tabbar>
	 </div>
</template>

<script>
import Header from "@/views/login/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import { Toast } from 'mint-ui';
import {mapMutations} from 'vuex'

//引入封装的依赖
import http from "@/common/api/request.js";

export default{
	name:"Login",
	data(){
		return{
			userTel:'',//用户输入的手机号码
			userPwd:'',//用户输入的密码
			//验证规则
			rules:{
				userTel:{
					//验证规则
					rule:/^1[23456789]\d{9}$/,
					msg:'手机号不能为空，并且时11位数字',
				},
				userPwd:{
					//验证规则
					rule:/^\w{6,12}$/,
					msg:'密码不能为空，并且时6·12位',
				},
			}
			
		}
	},
	components:{
		Header,
		Tabbar
	},
	methods:{
		...mapMutations(["USER_LOGIN"]),
		//去登录
		goLogin(){ 
			this.$router.push('/Login')
		},
		//点击登录按钮
		login(){
			//前端验证
			if(!this.validate('userTel')) return;
			if(!this.validate('userPwd')) return;
			//发送请求，后端验证
			http.$axios({
				url:'/api/login',
				method:'POST',
				data:{
					userTel:this.userTel,
					userPwd:this.userPwd
				}
			}).then(res=>{
				// console.log(res)
				// console.log(res.msg)
				//提示信息
				Toast(res.msg);
				//登录失败
				if(!res.success) return;
				//登录成功跳转页面，存储用户信息
				this.USER_LOGIN( res.data )
				
				//跳转到我的页面
				this.$router.push('/my')
				
			})
		},
		//验证信息提示
		validate(key){
			let bool = true;
			if( !this.rules[key].rule.test(this[key]) ){
				//提示信息
				Toast(this.rules[key].msg);
				bool= false;
				return false;
			}
			return bool;
		},
		
		//去注册页
		goRegister(){
			this.$router.push({
				name:"Register"
			})
		},
		
		//去找回密码
		goRecovery(){
			this.$router.push('/recovery')
		}
	}
}
</script>

<style scoped lang="less">
	.login {
	  background-color: #f5f5f5;
	
	  section {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    // width: 100%;
		
		div{
			margin: 0.3rem 0;
			width: 8.5rem;
			height: 1.1rem;
		}
		
		input{
			line-height: 1.1rem;
			background-color: #fff;
			padding:0 0.225rem;
			border: 1px solid #ccc;
			box-sizing: border-box;
		}
		
		.login-tel{
			margin-top: 0.5rem;
			font-size: 0.4rem;
			input{
				width: 8.5rem;
			}
		}
		.login-code{
			display: flex;
			font-size: 0.4rem;
			input{
				flex: 1;
			}
			
		}
		.login-btn{
			background-color: #b0352f;
			text-align: center;
			line-height:1.1rem ;
			color: #FFF;
			font-size:0.4rem ;
			border-radius:0.125rem ;
		}
		.tab{
			display: flex;
			justify-content: space-between;
			font-size: 0.35rem;
		}
	
	  }
	}
</style>